<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('考试作答')" />
  <style>
    .question-block {
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid #e7eaec;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    .question-title {
      font-weight: bold;
      margin-bottom: 15px;
      font-size: 16px;
    }
    .option-item {
      margin: 10px 0;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .option-item:hover {
      background-color: #f0f0f0;
    }
    .option-item.selected {
      background-color: #e6f7ff;
      border-left: 3px solid #1890ff;
    }
    .exam-info {
      background-color: #f8f9fa;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 5px;
    }
    .timer {
      font-size: 18px;
      font-weight: bold;
      color: #ff4d4f;
      text-align: center;
      margin: 15px 0;
    }
    .submit-btn {
      width: 100%;
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
  <div class="exam-info">
    <div class="row">
      <div class="col-md-6">
        <h3 th:text="${sysStudentExam.title}"></h3>
        <p>课程: <span th:text="${sysStudentExam.courseName}"></span></p>
        <p>班级: <span th:text="${sysStudentExam.deptName}"></span></p>
      </div>
      <div class="col-md-6 text-right">
        <p>考试时间: <span th:text="${sysStudentExam.duration} + '分钟'"></span></p>
        <p>满分: <span th:text="${sysStudentExam.grade} + '分'"></span></p>
      </div>
    </div>
  </div>

  <form class="form-horizontal m" id="exam-form">

    <input type="hidden" name="examId" th:value="${sysStudentExam.id}">

    <div th:each="question,iterStat : ${sysStudentExam.sysSingleQuestions}" class="question-block">
      <div class="question-title">
        <span th:text="${question.sort} +'. '+ ${question.titleDescription}"></span>
        (<span th:text="${question.grade} + '分'"></span>)
      </div>

      <input type="hidden" th:name="|answers[${iterStat.index}].questionId|" th:value="${question.id}">

      <div class="option-item" onclick="selectOption(this, '[[${iterStat.index}]]', 'A')">
        <input type="radio" th:name="|answers[${iterStat.index}].selectedOption|" value="A" style="display: none;">
        A. <span th:text="${question.optionA}"></span>
      </div>
      <div class="option-item" onclick="selectOption(this, '[[${iterStat.index}]]', 'B')">
        <input type="radio" th:name="|answers[${iterStat.index}].selectedOption|" value="B" style="display: none;">
        B. <span th:text="${question.optionB}"></span>
      </div>
      <div class="option-item" onclick="selectOption(this, '[[${iterStat.index}]]', 'C')">
        <input type="radio" th:name="|answers[${iterStat.index}].selectedOption|" value="C" style="display: none;">
        C. <span th:text="${question.optionC}"></span>
      </div>
      <div class="option-item" onclick="selectOption(this, '[[${iterStat.index}]]', 'D')">
        <input type="radio" th:name="|answers[${iterStat.index}].selectedOption|" value="D" style="display: none;">
        D. <span th:text="${question.optionD}"></span>
      </div>
    </div>
    <div class="form-group text-center">
      <button type="button" class="btn btn-primary btn-lg submit-btn" onclick="submitExam()">提交试卷</button>
    </div>
  </form>
</div>

<th:block th:include="include :: footer" />

<script th:inline="javascript">
  // 选择选项
  function selectOption(element) {
    // 移除同一问题下的所有选中状态
    var questionBlock = element.closest('.question-block');
    questionBlock.querySelectorAll('.option-item').forEach(item => {
      item.classList.remove('selected');
    });

    // 添加当前选项的选中状态
    element.classList.add('selected');

    // 设置对应的radio为选中状态
    var radio = element.querySelector('input[type="radio"]');
    radio.checked = true;
  }

  // 提交考试
  // 提交考试
  function submitExam() {
    $.modal.confirm("确定要提交试卷吗？提交后不能修改！", function() {
      // 收集所有答案
      const answers = [];
      const questionBlocks = document.querySelectorAll('.question-block');

      questionBlocks.forEach(block => {
        const questionId = block.querySelector('input[type="hidden"]').value;
        const selectedOption = block.querySelector('input[type="radio"]:checked');
        if (selectedOption) {
          const answer = {}
          answer.id = questionId;
          answer.answer = selectedOption.value;
          answers.push(answer)
        }
      });
      const examId = $.common.trim($("input[name='examId']").val())

      const data = {
        "id": examId,
        "sysSingleQuestions": answers
      }

      $.ajax({
        url: "/system/sysStudentExam/examSubmit",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function(result) {
          $.operate.ajaxSuccess(result);
        },
        error: function(xhr) {
          var _errorMsg = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">' + xhr.responseText + '</div></td></tr>'
          $("#" + row_id).after(_errorMsg);
        }
      });
    });
  }
</script>
</body>
</html>